<template>
	<div class="darenxiangqingye">
		<div class="fanhui" @click="fanhuishang">
			<router-link replace :to="'/home/'+this.shu_luyou+'/shujusousuo/darensousuo'">
				<i class="el-icon-arrow-left"></i>
				<span>达人详情页</span>
			</router-link>
		</div>
		
		<div class="darentou">
			<div class="darentou1">
				<div class="darentou1_1">
					<img src="../../../assets/img/laoluo.png" />
				</div>
				<div class="darentou1_2">
					<div class="laoluo1">
						<span>罗永浩</span>
						<img src="../../../assets/img/douyin.png" />
						<span v-if="shoucangshu==0" @click="yicang">
							<i class="el-icon-star-off"></i>收藏
						</span>
						<span v-if="shoucangshu==1" @click="yicang">
							<i class="el-icon-star-on"></i>已收藏
						</span>
					</div>
					<div class="laoluo2">
						<span>抖音号：</span>
						<span>luoyonghao</span>
					</div>
					<div class="laoluo3">
						<span>性&emsp;别：</span>
						<span>暂无</span>
						<span>年龄：</span>
						<span>未知</span>
					</div>
					<div class="laoluo4">
						<span>标&emsp;签：</span>
						<span v-for="(item,index) in 4" :key="index">财经</span>
					</div>
					<div class="laoluo5">
						<span>简&emsp;介：</span>
						<span>公众号 罗永浩 点击菜单栏-进直播群，扫码添加官方小助理就公众号 罗永浩 点击菜单栏-进直播群，扫码添加官方小助理就公众号 罗永浩 点击菜单栏-进直播群，扫码添加官方小助理就公众号 罗永浩 点击菜单栏-进直播群，扫码添加官方小助理就</span>
						<span v-if="zhan">展开<i class="el-icon-arrow-down"></i></span>
						<span v-if="!zhan">收起<i class="el-icon-arrow-up"></i></span>
					</div>
				</div>
			</div>
			<div class="darentou2">
				<table cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th>粉丝数</th>
							<th>粉丝质量</th>
							<th>总赞数</th>
							<th>视频数</th>
							<th>深码指数</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								{{shu | guolv}}
							</td>
							<td>
								{{shu | guolv}}
							</td>
							<td>
								{{shu | guolv}}
							</td>
							<td>
								{{shu | guolv}}
							</td>
							<td>
								569
							</td>
						</tr>
					</tbody>
				</table>
				<div class="jiarudou">
					<i class="el-icon-plus"></i>加入我的{{$store.state.pintaiName}}
				</div>
			</div>
		</div>
		
		<div class="sanbankuai">
			<ul>
				<li>
					<router-link :to="'/home/'+shu_luyou+'/darenxiangqingye/shujugailan'">
						数据概览
					</router-link>
				</li>
				<li>
					<router-link :to="'/home/'+shu_luyou+'/darenxiangqingye/fensihuaxiang'">
						粉丝画像
					</router-link>
				</li>
				<li>
					<router-link :to="'/home/'+shu_luyou+'/darenxiangqingye/zuopinliebiao'">
						作品列表
					</router-link>
				</li>
			</ul>
		</div>
		<div class="sanxian">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default{
		name:"darenxiangqingye",
		data(){
			return{
				zhan:true,
				shu:15613,
				shu_luyou:'',
				shoucangshu:0,
				cangshu:0,
			}
		},
		created(){
			this.shu_luyou=this.$route.path.split("/")[2];
			
			this.zhiding();
		},
		mounted(){
			var _self=this;
			//展开和收起
			$(".laoluo5 span:nth-of-type(2)").addClass("shenlue");
			
			$(".laoluo5 span:nth-of-type(3)").click(function(){
				if(_self.zhan==true){
					_self.zhan=false;
					$(this).siblings("span:nth-of-type(2)").removeClass("shenlue");
				}else{
					_self.zhan=true;
					$(this).siblings("span:nth-of-type(2)").addClass("shenlue");
				}
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			zhiding(){
				// 让页面回到顶部---效果(滚动动画回到顶部)
				let top = document.documentElement.scrollTop || document.body.scrollTop
				// 实现滚动效果 
				let timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50
					if (top <= 0) {
					  clearInterval(timeTop)
					}
				}, 10)
			},
			yicang(){
				if(this.cangshu==1){
					this.shoucangshu=0;
					this.cangshu=0;
					this.$message({
					  message: '已取消收藏！',
					  type: 'warning'
					});
				}else{
					this.shoucangshu=1;
					this.cangshu=1;
					this.$message({
					  message: '收藏成功！',
					  type: 'success'
					});
				}
			},
			
			fanhuishang(){
				// this.$router.go(-1);
				this.$router.push({
					path:'/home/'+this.shu_luyou+'/shujusousuo/darensousuo'
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.darenxiangqingye{
		
		.fanhui{
			a{
				cursor: pointer;
				color: #666666;
				font-size: 0.5rem;
				display: flex;
				align-items: center;
				text-decoration: none;
				i{
					margin-right:0.2rem ;
					font-size: 0.7rem;
				}
			}
		}
		.fanhui a:hover{
			color: #0091FF;
		}
		
		.darentou{
			margin-top:1rem ;
			padding: 0.8rem;
			background-color: #fff;
			border-radius:0.1rem ;
			display: flex;
			
			.darentou1{
				flex: 1;
				display: flex;
				
				.darentou1_1{
					flex: 1;
					text-align: center;
					img{
						width: 4rem;
						height: 4rem;
						border-radius:50% ;
					}
				}
				.darentou1_2{
					flex: 4;
					padding-left:0.4rem ;
					
					.laoluo1{
						display: flex;
						align-items: center;
						span:nth-of-type(1){
							display: block;
							color: #333333;
							font-size: 0.7rem;
							margin-right:0.6rem ;
						}
						img{
							width: 0.7rem;
							height: 0.7rem;
							margin-right:0.6rem ;
						}
						span:nth-of-type(2){
							border-radius:0.06rem ;
							cursor: pointer;
							color: #0091FF;
							display: block;
							font-size: 0.4rem;
							border: 1px solid #D4D4D4;
							padding: 0.1rem 0.3rem;
							i{
								margin-right:0.2rem ;
							}
						}
					}
					
					.laoluo2{
						margin-top:0.4rem ;
						display: flex;
						align-items: center;
						span{
							color: #666666;
							font-size: 0.4rem;
							display: block;
						}
						span:nth-of-type(1){
							margin-right:0.4rem ;
						}
					}
					
					.laoluo3{
						display: flex;
						align-items: center;
						margin-top:0.4rem ;
						
						span{
							display: block;
							color: #666666;
							font-size: 0.4rem;
						}
						span:nth-of-type(2){
							margin-left:0.4rem ;
						}
						span:nth-of-type(3){
							margin-left:1rem ;
						}
						span:nth-of-type(4){
							margin-left:0.4rem ;
						}
					}
					
					.laoluo4{
						margin-top:0.4rem ;
						display: flex;
						align-items: center;
						
						span{
							display: block;
							color: #666;
							font-size: 0.4rem;
						}
						span:not(:first-child){
							background-color: #F1F4FB;
							padding: 0.1rem 0.3rem;
							border-radius:0.1rem ;
							margin-left:0.3rem ;
						}
					}
					
					.laoluo5{
						margin-top:0.4rem ;
						span{
							display: block;
							color: #666;
							font-size: 0.4rem;
							float: left;
						}
						span:nth-of-type(2){
							width: 10rem;
							margin-left:0.4rem ;
							float: left;
							line-height: 0.8rem;
						}
						.shenlue{
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
						span:nth-of-type(3){
							float: left;
							margin-left:0.2rem ;
							color: #0091FF;
							cursor: pointer;
							margin-top:0.1rem ;
							
							i{
								margin-left:0.3rem ;
							}
						}
					}
					.laoluo5::after{
						content: "";
						display: block;
						clear: both;
					}
				}
			}
			.darentou2{
				flex: 1;
				
				table{
					width: 100%;
					th{
						padding: 0.8rem 0;
						color: #666666;
						font-size: 0.4rem;
					}
					td{
						font-size: 0.5rem;
						text-align: center;
						color: #0091FF;
					}
					td:nth-of-type(1){
						color: #F6685C;
					}
					td:nth-of-type(2){
						color: #32CEC5;
					}
					td:nth-of-type(3){
						color: #FF8500;
					}
					
				}
				
				.jiarudou{
					cursor: pointer;
					border: 1px solid #D4D4D4;
					color: #0091FF;
					font-size: 0.4rem;
					display: inline;
					text-align: center;
					padding: 0.1rem 0.3rem;
					float: right;
					margin-top:1.4rem ;
					border-radius:0.1rem ;
					i{
						font-size: 0.5rem;
						margin-right: 0.3rem;
					}
				}
				.jiarudou:hover{
					background-color: #0091FF;
					color: #fff;
				}
			}
		}
		
		.sanbankuai{
			margin-top:1rem ;
			background-color: #fff;
			border-top-left-radius:0.1rem ;
			border-top-right-radius:0.1rem ;
			border-bottom:1px solid #F1F4FB ;
			
			ul{
				list-style: none;
				padding-left:1rem ;
				
				li{
					cursor: pointer;
					float: left;
					margin:0 3rem ;
					a{
						text-decoration: none;
						color: #666666;
						font-size: 0.45rem;
						padding: 1rem 0;
						display: block;
					}
					.router-link-active{
						color: #0091FF;
						border-bottom:2px solid #0091FF ;
					}
				}
			}
			ul::after{
				content: "";
				display: block;
				clear: both;
			}
		}
	}
</style>
